<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601568 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="519"/>
<h1>09-BOM</h1>
<div>
<table bgcolor="#D4DDE5" border="0">
<tr><td><b>创建时间：</b></td><td><i>2018/4/28 14:58</i></td></tr>
<tr><td><b>更新时间：</b></td><td><i>2020/4/14 10:23</i></td></tr>
<tr><td><b>作者：</b></td><td><i>18081003141@163.com</i></td></tr>
</table>
</div>
<br/>

<div>
<span><div><div><span style="font-size: 12pt;"><img src="00-笔记_files/寄居蟹.jpg" type="image/jpeg" data-filename="寄居蟹.jpg" style="font-size: 12pt;" width="417"/></span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">螃蟹  ---&gt;  贝   壳</span></div><div><span style="font-size: 12pt;">   js   ---&gt;  浏览器  </span></div><div><br clear="none"/></div><div><span style="font-size: 16pt;">BOM（Browser Object Model  浏览器对象模型）</span></div><div><br clear="none"/></div><div><img src="00-笔记_files/Image.png" type="image/png" data-filename="Image.png" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">    </span></div><div><br clear="none"/></div><div><span style="font-size: 14pt;">window是全局浏览器内置顶级对象</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    表示浏览器中打开的窗口（没有应用于window对象的公开标准，不过所有浏览器都支持该对象）</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">Window 对象表示一个浏览器窗口或一个框架。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">    在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">例如，可以只写 document，而不必写 window.document。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">    同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 window.alert()。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">除了上面列出的属性和方法，window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">-----------------------------------------------------------------------------------------------------</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">1、全局变量默认是挂在window下的</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-family: &quot;Yu Gothic UI&quot;; color: rgb(51, 51, 51);"><font style="font-size: 14pt;">var  a = 123;</font></span></div><div><font style="font-size: 14pt;"><br clear="none"/></font></div><div><span style="font-family: &quot;Yu Gothic UI&quot;;"><font style="font-size: 14pt;">alert(window.a) // 123</font></span></div><div><br/></div><div><span style="font-family: &quot;Yu Gothic UI&quot;;"><font style="font-size: 14pt;">function fn () {</font></span></div><div><span style="font-family: &quot;Yu Gothic UI&quot;;"><font style="font-size: 14pt;">    b = 30</font></span></div><div><span style="font-family: &quot;Yu Gothic UI&quot;;"><font style="font-size: 14pt;">}</font></span></div><div><span style="font-family: &quot;Yu Gothic UI&quot;;"><font style="font-size: 14pt;">fn()</font></span></div><div><span style="color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;;"><font style="font-size: 14pt;">console.log(b) // 30</font></span></div><div><span style="color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;;"><font style="font-size: 14pt;">console.log(window.b) // 30</font></span></div></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">2、window上的各种属性</span></div><div><div><br/></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 186px;"></col><col style="width: 310px;"></col></colgroup><tbody><tr><td style="width: 186px; padding: 8px; border: 1px solid;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14pt; font-variant-caps: normal; font-variant-ligatures: normal;">name</span></span></div></td><td style="width: 310px; padding: 8px; border: 1px solid;"><div><span style="font-size: 14pt;">window的名称</span></div></td></tr><tr><td style="width: 186px; padding: 8px; border: 1px solid;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14pt; font-variant-caps: normal; font-variant-ligatures: normal;">origin</span></span></div></td><td style="width: 310px; padding: 8px; border: 1px solid;"><div><span style="font-size: 14pt;">当前地址源</span></div></td></tr><tr><td style="width: 186px; padding: 8px; border: 1px solid;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14pt; font-variant-caps: normal; font-variant-ligatures: normal;">innerWidth</span></span></div></td><td style="width: 310px; padding: 8px; border: 1px solid;"><div><span style="font-size: 14pt;">浏览器宽度</span></div></td></tr><tr><td style="width: 186px; padding: 8px; border: 1px solid;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14pt; font-variant-caps: normal; font-variant-ligatures: normal;">innerHeight</span></span></div></td><td style="width: 310px; padding: 8px; border: 1px solid;"><div><span style="font-size: 14pt;">浏览器高度</span></div></td></tr><tr><td style="width: 186px; padding: 8px; border: 1px solid;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14pt; font-variant-caps: normal; font-variant-ligatures: normal;">length</span></span></div></td><td style="width: 310px; padding: 8px; border: 1px solid;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="font-size: 14pt; color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal;">frames的数量</span></span></div></td></tr><tr><td style="width: 186px; padding: 8px; border: 1px solid;"><div><span style="font-size: 14pt;">scr</span><span style="font-size: 14pt;">ollTop</span></div></td><td style="width: 310px; padding: 8px; border: 1px solid;"><div><span style="font-size: 14pt;">纵向滚动条滚动高度</span></div></td></tr><tr><td style="width: 186px; padding: 8px; border: 1px solid;"><div><span style="font-size: 14pt;">scrollLeft</span></div></td><td style="width: 310px; padding: 8px; border: 1px solid;"><div><span style="font-size: 14pt;">横向滚动条滚动高度</span></div></td></tr></tbody></table><div><font style="font-size: 14pt;"><br/></font></div><div><span style="font-size: 12pt;">console.log(window)</span></div><div><span style="font-size: 12pt;">可以查看：</span></div><div><span style="font-size: 14pt;">    各种关于浏览器大小、位置的属性</span></div></div><div><span style="font-size: 14pt;">    各种常见事件</span></div><div><br/></div><div><span style="background-color: rgb(255, 250, 165);-evernote-highlight:true;"><span style="background-color: rgb(255, 250, 165);font-size: 14pt;-evernote-highlight:true;">注意：window下的各种属性或方法名都不要直接用来作为全局变量命，会冲突</span></span></div><div><br/></div><div><span style="font-size: 12pt;"><br/></span></div><div><span style="font-size: 12pt;">3、window下的子对象</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">   A、location</span></div><div><br clear="none"/></div><ul style="margin: 10px 0px 0px 35px; padding: 0px; border: 0px; font-size: 14px; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #fdfcf8;"><li style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 252, 248); color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">window.location.href   <span style="font-size: 11pt; background-color: rgb(253, 252, 248); color: rgb(0, 0, 0); font-family: PingFangSC-Regular; font-variant-caps: normal; font-variant-ligatures: normal;">             </span><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 252, 248); color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">当前页面的 URL，可以获取，可以修改（页面跳转）。</span></span></div></li><li style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 252, 248); color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">window.</span><span style="font-size: 14px; color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">location.hostname      web 主机的域名</span></div></li><li style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 252, 248); color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">window.</span><span style="font-size: 14px; color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">location.pathname      当前页面的路径和文件名</span></div></li><li style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 252, 248); color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">window.</span><span style="font-size: 14px; color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">location.port               web 主机的端口 （80 或 443）</span></div></li><li style="margin: 3px 0px 0px; padding: 0px; border: 0px;"><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 252, 248); color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">window.</span><span style="font-size: 14px; color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">location.protocol         所使用的 web 协议（http:// 或 https://）</span></div></li><li><div><span style="font-size: 14px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(253, 252, 248); color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">window.</span><span style="font-size: 14px; color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; font-variant-caps: normal; font-variant-ligatures: normal;">location.search           请求参数（？后面的内容）</span></div></li></ul><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    </span><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;"> </span><span style="font-size: 12pt;">window.location.reload();</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    刷新页面的方法。一般情况下给reload()传递一个true，让他刷新，并不使用缓存。</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    缓存的东西一般为js文件，css文件等。</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    用这个方法可以让自己不能动的页面动起来了。刷新当前页面。</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">  B、window.navigator</span></div><div><br clear="none"/></div><div><span style="font-size: 16px;"><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">  </span>  navigator.appName      返回获取当前浏览器的名称。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">    navigator.appVersion    返回 获取当前浏览器的版本号。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">    navigator.platform        返回 当前计算机的操作系统。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">    以上属性已经在逐渐被抛弃了。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">    一个新的属性将替代这些属性。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px;">    navigator.userAgent   返回浏览器信息（可用此属性判断当前浏览器）</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">判断当前浏览器类型的代码：</span></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">function isBrowser() {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    var userAgent = navigator.userAgent;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    //微信内置浏览器</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">        return &quot;MicroMessenger&quot;;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    }</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    //QQ内置浏览器</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    else if(userAgent.match(/QQ/i) == 'QQ') {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">        return &quot;QQ&quot;;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    }</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    //Chrome</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    else if(userAgent.match(/Chrome/i) == 'Chrome') {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">        return &quot;Chrome&quot;;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    }</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    //Opera</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    else if(userAgent.match(/Opera/i) == 'Opera') {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">        return &quot;Opera&quot;;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    }</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    //Firefox</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    else if(userAgent.match(/Firefox/i) == 'Firefox') {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">        return &quot;Firefox&quot;;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    }</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    //Safari</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    else if(userAgent.match(/Safari/i) == 'Safari') {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">        return &quot;Safari&quot;;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    }</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    //IE</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    else if(!!window.ActiveXObject || &quot;ActiveXObject&quot; in window) {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">        return &quot;IE&quot;;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    }</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    else {</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">        return &quot;未定义:&quot;+userAgent;</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">    }</span></div><div><span style="font-family: Monaco; font-size: 9pt; color: #333333;">}</span></div></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">C、history</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    history.go(1)    参数可写任意整数，正数前进，负数后退</span></div><div><span style="font-size: 12pt;">    history.back()   后退</span></div><div><span style="font-size: 12pt;">    history.forward() 前进</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">D、screen</span><span style="font-size: 12pt;">: 屏幕</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">window.screen.width 返回当前屏幕宽度(分辨率值)</span></div><div><span style="font-size: 12pt;">window.screen.height 返回当前屏幕高度(分辨率值)</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">4、window下的弹框方法</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    alert()   prompt()  confirm()</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">5、定时器</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">    超时定时器        间隔定时器</span></div><div><span style="font-size: 12pt;">   </span> <span style="font-size: 12pt;">setTimeout       setInterval</span></div><div><span style="font-size: 12pt;">    clearTimeout    clearInterval</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">6、window.onload</span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">7、window.onscroll</span></div><div>    </div><div>var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; //兼容</div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">8、window.onresize</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br/></div><div><span style="font-size: 16pt;"><span style="font-size: 16pt; font-weight: bold;">练习</span></span></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">     猜数字游戏</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16pt;"><br/></span></div><div><br clear="none"/></div><div><br clear="none"/></div></div><div><br clear="none"/></div></span>
</div></body></html> 